/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 系统自带菜单链接选择弹窗
 *  */

import React, { useState, useEffect, useCallback } from "react";
import { Modal, Radio, Empty } from "antd";
import { connect } from "dva";

const RadioGroup = Radio.Group;

const BuiltInMenuModal = ({
  onSelect,
  visible,
  onClose,
  channel,
  officialMenuList,
  miniProgramMenuList,
  dispatch,
  platformList,
}) => {
  const { weixin = {} } = platformList;
  const { platform } = weixin;
  const [menuList, setMenuList] = useState([]);

  const onChange = useCallback(
    e => {
      const { originalValue } = e.target;
      onSelect && onSelect(originalValue);
      if (channel === "view") {
        // 获取系统菜单链接
        dispatch({
          type: "wxSettings/copySystemURL",
          payload: {
            platform,
            menu_key: originalValue.key,
          },
        });
      }
      setTimeout(() => {
        onClose && onClose();
      }, 300);
    },
    [channel, dispatch, onClose, onSelect, platform]
  );

  useEffect(
    () => {
      setMenuList(channel === "view" ? officialMenuList : miniProgramMenuList);
    },
    [visible, channel]
  );

  return (
    <Modal
      width={560}
      destroyOnClose
      centered
      title="页面地址跳转系统内置功能页面"
      visible={visible}
      onCancel={onClose}
      footer={null}
    >
      {menuList.length > 0 ? (
        <RadioGroup onChange={onChange}>
          {menuList.map((val, index) => (
            <Radio
              style={{ padding: 10, width: 120 }}
              key={index}
              value={val.key || val.page}
              originalValue={val}
            >
              {val.name}
            </Radio>
          ))}
        </RadioGroup>
      ) : (
        <Empty />
      )}
    </Modal>
  );
};

export default connect(({ wxSettings, platform }) => ({
  miniProgramMenuList: wxSettings.miniProgramMenuList,
  officialMenuList: wxSettings.officialMenuList,
  platformList: platform.platformList,
}))(BuiltInMenuModal);
